<template>
  <div class="order">
    <el-table :data="orderlist" border height="400" style="width: 75%">
      <el-table-column type="index" width="50" />
      <el-table-column prop="id" label="订单编号" />
      <el-table-column prop="money" label="金额" />
      <el-table-column prop="createtime" label="订单时间" width="120" />
      <el-table-column prop="address" label="收货地址" />

      <el-table-column prop label="操作" width="180">
        <template #default="scope">
          <el-button
            size="mini"
            type="success"
            @click="orderPay(scope.row.id)"
            v-if="scope.row.flag == 1"
          >支付</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="orderDelete(scope.row.id, scope.row.flag)"
            v-if="scope.row.flag == 1"
          >删除订单</el-button>
          <el-button
            size="mini"
            type="primary"
            @click="cReceipt(scope.row.id)"
            v-if="scope.row.flag == 3"
          >确认收货</el-button>
          <span v-if="scope.row.flag == 2">待发货</span>
          <span v-if="scope.row.flag > 3">已收货</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { reactive, toRefs, onMounted } from "vue";
import { ElMessageBox, ElNotification } from "element-plus";
import axios from "axios";

function loadData(state) {
  const params = {
    username: JSON.parse(sessionStorage.getItem("token")),
  }
  axios({
    url: '/getOrderList',
    method: 'get',
    params: params,
  }).then(res => {
    if (res.data.code == 200) {
      state.orderlist = res.data.data
      // console.log(state.orderlist);
    }
  });
}

function useCReceipt(state) {
  const cReceipt = (id) => {
    axios({
      url: '/changeStatus',
      method: 'get',
      params: {
        oid: id
      }
    }).then(res => {
      console.log(res)
      if (res.data.code == 200) {
        ElNotification({
          title: "成功",
          message: "确认收货成功",
          type: "success",
          duration: 2000,
        });
        loadData(state)
      } else {
        ElNotification({
          title: "失败",
          message: "确认收货失败",
          type: "error",
          duration: 2000,
        });
      }
    });
  }
  return {
    cReceipt
  }
}

function useOrderDelete(state) {
  const orderDelete = (id, flag) => {
    ElMessageBox.confirm("是否确认删除该订单？", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
      callback: (action) => {
        if (action == 'confirm') {
          const params = {
            oid: id,
            flag: flag,
          }
          axios({
            url: '/uDeleteOrder',
            method: 'get',
            params: params
          }).then(res => {
            console.log(res)
            if (res.data.code == 200) {
              ElNotification({
                title: "成功",
                message: "删除成功",
                type: "success",
                duration: 2000,
              });
              loadData(state)
            } else {
              ElNotification({
                title: "失败",
                message: "删除失败",
                type: "error",
                duration: 2000,
              });
            }
          });
        }
      },
    });
  }
  return {
    orderDelete
  }
}

function useOrderpay(state) {
  const orderPay = (id) => {
    axios({
      url: '/changePaid',
      method: 'get',
      params: {
        oid: id
      }
    }).then(res => {
      console.log(res)
      if (res.data.code == 200) {
        ElNotification({
          title: "成功",
          message: "支付成功",
          type: "success",
          duration: 2000,
        });
        loadData(state)
      } else {
        ElNotification({
          title: "失败",
          message: "支付失败",
          type: "error",
          duration: 2000,
        });
      }
    });
  }
  return {
    orderPay
  }
}

export default {
  setup() {
    const state = reactive({
      orderlist: []
    })

    onMounted(() => {
      loadData(state);
    });
    return {
      ...toRefs(state),
      ...useCReceipt(state),
      ...useOrderDelete(state),
      ...useOrderpay(state),
    }
  }

}
</script>

<style>
.order {
  width: 80%;

  margin: 100px 0 100px auto;
}
</style>